<template>
<div>
  <div id="container" style="width: 100%;height: 90vh"></div>
</div>
</template>



<script>
// 信息窗体的内容
var content = [
  "<div style='width: 100px;height: 100px'>这是信息窗口</div>"
];


export default {
  name: "Item1",
  data(){
    return{

    }
  },
  created() {

  },
  mounted() {
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 13,//缩放
      center: [116.397241,39.919032],
      // resizeEnable: true,
      // mapStyle: 'amap://styles/whitesmoke'
    });

    //点标记
    // 创建一个 Marker 实例：
    var marker = new AMap.Marker({
      position: new AMap.LngLat(116.397241,39.919032),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '北京',
      // content: '<div>自定义内容</div>'
    });
    // 将创建的点标记添加到已有的地图实例：
    map.add(marker);

    // 创建 infoWindow 实例
    var infoWindow = new AMap.InfoWindow({
      content: content.join("<br>")  //传入 dom 对象，或者 html 字符串

    });
    //绑定事件
    var clickHandler=function(e){
      console.log("位置:"+e.lnglat.getLng()+","+e.lnglat.getLat());
    };
    var clickHandler2=function(e){
      console.log("位置:"+e.lnglat.getLng()+","+e.lnglat.getLat());
      infoWindow.open(map,[e.lnglat.getLng(),e.lnglat.getLat()])
    };
    map.on('click',clickHandler)
    marker.on('click',clickHandler2)


    //路线规划
    map.plugin('AMap.DragRoute', function () {
      // path 是驾车导航的起、途径和终点，最多支持16个途经点
      var path = []

      path.push([116.303843, 39.983412])
      path.push([116.321354, 39.896436])
      path.push([116.407012, 39.992093])

      var route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE)
      // 查询导航路径并开启拖拽导航
      route.search()
    })
  },
}
</script>

<style scoped>

</style>